<template>
<div id="login">
    <el-card style="margin:0 auto;width:400px;">
        <div slot="header">
            <span>注册</span>
        </div>

        <el-form ref="formLogin" label-position="left" :model="formLoginData" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="formLoginData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="formLoginData.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input type="password" v-model="formLoginData.password2"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="formLoginData.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="formLoginData.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="regist">注册</el-button>
                <router-link to="/login">已有账号</router-link>
            </el-form-item>
        </el-form>
    </el-card>

</div>
</template>

<script>
export default {
    data() {
        let validUsername = (rule, value, callback) => {
            let regx = /^[a-zA-Z]\w{3,17}$/
            if (!regx.test(value)) {
                callback(new Error('用户名非法'))
            } else {
                callback()
            }
        }
        let validPassword = (rule, value, callback) => {
            let regx = /^.{6,18}$/
            if (!regx.test(value)) {
                callback(new Error('密码非法'))
            } else {
                callback()
            }
        }
        let validPassword2 = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('不能为空'))
            } else if (value !== this.formLoginData.password) {
                callback(new Error('两次密码输入不一致'))
            } else {
                callback()
            }
        }
        let validEmail = (rule, value, callback) => {
            let regx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!regx.test(value)) {
                callback(new Error('邮箱非法'))
            } else {
                callback()
            }
        }
        let validPhone = (rule, value, callback) => {
            let regx = /^1[34578]\d{9}$/
            if (!regx.test(value)) {
                callback(new Error('手机号码错误'))
            } else {
                callback()
            }
        }
        let isexistname = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=username&fieldvalue=${value}`).then(result => {
                if (result.data.error === 1) {
                    callback(new Error('用户名已存在'))
                } else {
                    callback()
                }
            })
        }
        let isexistphone = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=phone&fieldvalue=${value}`).then(result => {
                if (result.data.error === 1) {
                    callback(new Error('手机号码已存在'))
                } else {
                    callback()
                }
            })
        }
        let isexistemail = (rule, value, callback) => {
            this.$http.get(`/users/isexist?fieldname=email&fieldvalue=${value}`).then(result => {
                if (result.data.error === 1 ) {
                    callback(new Error('邮箱已存在'))
                } else {
                    callback()
                }
            })
        }
        return {
            formLoginData: {
                username: '',
                password: '',
                password2: '',
                email: '',
                phone: '',
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { validator: validUsername, trigger: ["change","blur"]},
                    { validator: isexistname, trigger: ["change","blur"]}
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { validator: validPassword, trigger: 'change' }
                ],
                password2: [
                    { required: true, message: "请再次输入密码", trigger: "blur" },
                    { validator: validPassword2, trigger:["change","blur"] }
                ],
                email: [
                    {required:true,message:'请输入邮箱',trigger:"blur"},
                    { validator: validEmail, trigger:["change","blur"] }, 
                    { validator: isexistemail, trigger:["change","blur"]}
                ],
                phone: [
                    {required:true,message:'请输入手机号码',trigger:"blur"},
                    { validator: validPhone, trigger: ["change","blur"] },
                    { validator: isexistphone, trigger: ["change","blur"]}
                ]
            },
        }
    },
    created() {
        // this.getUsersList()
    },
    methods: {
        regist() {
            this.$refs.formLogin.validate((valid) => {
                if (!valid) {
                    return
                }
                this.$http.post('/users/add', this.$qs.stringify(this.formLoginData)).then((result) => {
                    this.$router.push('/welcome');
                })
            })
        },
        getUsersList() {
            this.$http.get('/users/list').then((result) => {
                // console.log(result.data.data)
            })
        },
    }
}
</script>

<style scoped>

</style>
